<template>
  <div class="developer-profile">
    <!-- 主题切换组件 -->
    <ThemeSwitcher />

    <el-row class="main-container" :gutter="20">
      <el-col :xs="0" :sm="8" :md="6" :lg="5" :xl="4">
        <Sidebar />
      </el-col>

      <el-col :xs="24" :sm="16" :md="18" :lg="19" :xl="20">
        <MainContent />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import MainContent from './MainContent.vue'
import Sidebar from './Sidebar.vue'
import ThemeSwitcher from './ThemeSwitcher.vue'
</script>

<style scoped lang="scss">
.developer-profile {
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
}

.main-container {
  padding: 20px;
  margin: 0 auto;
  max-width: 1400px;
  height: 100%;
}
</style>
